<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            background-color: rgba(red, green, blue, alpha);
            
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>

    class Box{
        constructor(){
            this.dom = this.domDiv()
            this.append()
            this.color = this.color()
            this.chi = this.chi()
            this.left = this.left()
            this.top = this.top()
        }
        domDiv(){
            return document.createElement('div')
        }
        append(){
            document.body.appendChild(this.dom)
        }
        color(){
            return 'rgba('+Math.floor(Math.random()*255)+', '+Math.floor(Math.random()*255)+', '+Math.floor(Math.random()*255)+')'
        }
        chi(){
            return Math.floor(Math.random()*(200 - 30) + 50)
        }
        left(){
            return Math.floor(Math.random()*(1200 - 100) + 100)
        }
        top(){
            return Math.floor(Math.random()*(500 - 100) + 100)
        }
    }
    // 创建矩形
    class Rect extends Box{
        constructor(){
            super()
            this.style()
        }
        style(){
            this.dom.style.height = this.chi + 'px'
            this.dom.style.width = this.chi + 'px'
            this.dom.style.backgroundColor = this.color
            this.dom.style.position = 'absolute'
            this.dom.style.left = this.left + 'px'
            this.dom.style.top = this.top + 'px'
        }
    }

    // 创建圆形
    class Arc extends Box{
        constructor(){
            super()
            this.style()
        }
        style(){
            this.dom.style.height = this.chi + 'px'
            this.dom.style.width = this.chi + 'px'
            this.dom.style.backgroundColor = this.color
            this.dom.style.position = 'absolute'
            this.dom.style.left = this.left + 'px'
            this.dom.style.top = this.top + 'px'
            this.dom.style.borderRadius = '50%'
        }
    }


    // 创建点击事件

    class But{
        constructor(){
            this.box()
            this.dom()
            this.click()
        }
        box(){
            let box = document.createElement('div')
            box.className = 'Maxbox'
            document.body.appendChild(box)
        }
        dom(){
            let arr  = ['创建矩形','创建圆形']
            document.querySelector('.Maxbox').innerHTML = arr.map((item,i) => {
               return  `<button index="${i}">${item}</button>`
            }).join('')
        }
        click(){
            document.querySelector('.Maxbox').onclick= e =>{
                if(e.target.nodeName === 'BUTTON'){
                    switch(e.target.getAttribute('index')){
                        case '0':
                        new Rect()
                        break;
                        case '1':
                        new Arc()
                        break;
                    }
                }
            }   
        }
    }

    new But()
</script>